<template>
  <div class="user">
    <div class="user-main" >
      <el-carousel :interval="4000" type="card" height="300px" >
        <el-carousel-item v-for="img in imgs" :key="img">
          <el-image :src="img" ></el-image>
        </el-carousel-item>
      </el-carousel>
      <div  class="user-centre">
        <el-row  >
          <el-button type="primary" round @click="shop">商城</el-button>
          <el-button type="primary" round @click="forum">讨论</el-button>
          <el-button type="primary" round>关于</el-button>
        </el-row>
      </div>
    </div>

  </div>
</template>
<script setup>
import {ref} from 'vue'
import router from "../../router";
import img1 from "@/assets/img/user/userMain1.jpg"
import img2 from "@/assets/img/user/userMain2.jpg"
import img3 from "@/assets/img/user/userMain3.jpg"

const imgs = ref([img1,img2,img3])

const shop=()=>{
  router.push('/user/shop')
}
const forum=()=>{
  router.push('/user/forum')
}
</script>

<style scoped>
.user{
  height: 1000px;
  background: linear-gradient(70deg, blue, pink);
  overflow: auto;



}
.user-main .el-carousel{
  caret-color: transparent;
  transform-origin: center center;
  top: 10px;
}
.user-centre{
  position:absolute;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center center;
  top: 50%;
  left: 50%;

}
.el-button{

  width: 100px;
  height: 60px;
  padding: 0;
  margin-right: 50px;

}

</style>

